<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >

      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <el-progress type="circle" v-if="flag" :percentage="0"></el-progress>
    <el-progress type="circle" v-else :percentage="100"></el-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      // progressFlag: false,
      // loadProgress: 0,
      fileList: [
        // 上传的文件列表
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100", //图片地址
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100", // 图片地址
        },
      ],
    };
  },
  methods: {
    submitUpload() {
      // 提交上传
      this.$refs.upload.submit(); // 触发上传
      setTimeout(() => {
        this.flag = !this.flag;
      }, 500);  // 上传成功后，flag为false，显示进度条
      if(this.flag){
        this.$message({
          message: "上传成功",
          type: "success",
        });
      }else{
        this.$message({
          message: "上传失败",
          type: "error",
        });
      }
      if(this.flag == false) {
        setTimeout(() => {
          this.flag = true 
        }, 500);// 上传成功后，flag为true，隐藏进度条
      }
    },
    handleRemove(file, fileList) {
      // 删除文件
      console.log(file, fileList); //file:当前删除的文件，fileList:删除后的文件列表
    },
    handlePreview(file) {
      // 预览文件
      console.log(file); // file:当前预览的文件
    },
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style scopend lang="scss"></style>
